<template>
  <div>
    <div style="width: 1000px">
      <imgBox></imgBox>
    </div>
    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
    <wordBox></wordBox>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      class="filter-tree"
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      @check-change="get_check"
      ref="tree"
    >
    </el-tree>
  </div>
</template>

<script>
import imgBox from "./imgBox.vue";
import wordBox from "./word.vue";
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    get_check(data, obj, a) {
      let arr2 = this.$refs.tree.getCheckedNodes(false, true);
      // false  是否只是叶子节点 true表示 包含半选节点
      let arr1 = this.$refs.tree.getCheckedNodes(true, true);
      // false false 返回只包含勾选数组
      console.log(arr2);
      let ids = arr2.map((res) => {
        return res.id;
      });
      let arrOne = [];
      function one(arr, id = null) {
        arr.map((res, index) => {
          let obj = JSON.parse(JSON.stringify(res));
          obj.pid = id || 0;
          delete obj.children;
          arrOne.push(obj);
          if (res.children) {
            one(res.children, res.id);
          }
        });
      }
      one(this.data);
      let s = arrOne.filter((res) => {
        return ids.includes(res.id) === true;
      });
      console.log(s, "arrone");
      let ss = {
        1: "buildingId",
        2: "floorId",
        3: "roomIdList",
      };
      function tree(object, parent, num) {
        let treeList = [];
        num++;
        object.map((res) => {
          if (res.pid === parent) {
            // 第一次循环表示有多少符合条件的一级
            let obj = res; // 拿到符合条件 对象
            // obj[ss[num]] = obj.id;
            obj.num = num;

            let temp = tree(object, obj.id, num); // 拿到父级的id 递归 对比pid
            // 比如 拿到id为1 进入递归 对比 res.pid === 1 拿到结果
            if (temp.length > 0) {
              // 查询有结果 就 赋值
              // obj[ss[num]] = temp;
              obj.children = temp;
            }
            treeList.push(obj);
          }
        });
        return treeList;
      }
      // console.log();
      let buildingIdList = [];
      let floorIdList = [];
      let roomIdList = [];
      let result = tree(s, 0, 0);

      function one1(arr) {
        arr.map((res) => {
          let obj = JSON.parse(JSON.stringify(res));
          delete obj.children;
          if (obj.num === 1) {
            buildingIdList.push(obj);
          }
          if (obj.num === 2) {
            floorIdList.push(obj);
          }
          if (obj.num === 3) {
            roomIdList.push(obj);
          }
          if (res.children) {
            one1(res.children);
          }
        });
      }
      one1(result);
      console.log(buildingIdList, floorIdList, roomIdList);
      let list = [];
      buildingIdList.map((res1) => {
        let obj = {};
        obj.buildingId = res1.id;
        obj.floorIdList = [];
        floorIdList.map((res2, index) => {
          obj.floorIdList[index] = {
            floorId: res2.id,
            roomIdList: roomIdList.map((res) => res.id),
          };
        });
        list.push(obj);
      });
      console.log(list, "xxxx");
      // let form = {
      //   buildingIdList: [
      //     {
      //       buildingId: "3754e83a4dddb94f0121bd70e4b3HxO2",
      //       floorIdList: [
      //         {
      //           floorId: "1517389993009049602",
      //           roomIdList: ["1517390025762369538"],
      //         },
      //         {
      //           floorId: "1517392224257142785",
      //           roomIdList: ["1517392286588694529"],
      //         },
      //       ],
      //     },
      //   ],
      // };
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([9]);
    },
  },

  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {},
  components: {
    imgBox,
    wordBox,
  },
};
</script>
